<template>
	<view class="container">
		<button v-if="isLogin === false" type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" class="login">授权登录</button>
		<view v-else>
			<view class="user-container">
				<image class="avatar" :src="user.avatar"></image>
				<text class="nickname">{{ user.user_nickname }}</text>
			</view>
			<view class="section-container">
				<view class="item" v-if="stuAuthIds.includes(user.id)" @click="studentClick">
					<text class="item__title">
						学生信息
					</text>
					<image src="../../static/image/arrow.png" class="item__more">
				</view>
				<view class="item" v-if="user.id === 5" @click="fightClick">
					<text class="item__title">
						开始战斗
					</text>
					<image src="../../static/image/arrow.png" class="item__more">
				</view>
			</view>
			<button type="warn" class="login" @click="logoutClick">退出登录</button>
		</view>
		
	</view>
</template>

<script>
	import { login } from "../../api/wxuser.js";
	import { setCache, getCache, removeCache } from "../../util/index.js";
	
	export default {
		data() {
			return {
				isLogin: false,
				user: {
					avatar: "",
					balance: 0,
					birthday: 0,
					coin: 0,
					id: 0,
					score: 0,
					sex: 0,
					user_nickname: "",			
				},
				stuAuthIds: [5, 6, 7, 8],
			}
		},
		onLoad() {
			this.code = '';
			getCache('user_info', false).then((res) => {
				this.isLogin = true;
				Object.assign(this.user, res || {});
			}).catch(() => {
				this.getLoginCode();
			});
		},
		methods: {
			getLoginCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						timeout: 5e3,
						success: resolve,
						fail: reject,
					});
				}).then(({ code, errMsg }) => {
					console.warn(code, errMsg);
					this.code = code;
				}).catch(() => {
					return this.getLoginCode();
				});
			},
			getUserInfo(e) {
				console.log(e);
				if (!this.code) {
					return uni.showToast({
						title: "请重试登录"
					});
				}
				uni.showLoading();
				login({
					code: this.code,
					encrypted_data: e.detail.encryptedData,
					raw_data: e.detail.rawData,
					signature: e.detail.signature,
					iv: e.detail.iv,
				}).then(({ token, user }) => {
					setCache('token', token).catch(console.warn);
					setCache('user_info', user).catch(console.warn);
					this.isLogin = true;
					Object.assign(this.user, user);
					uni.showToast({
						title: "登录成功"
					});
				}).catch((err) => {
					uni.showToast({
						title: err
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},
			logoutClick() {
				this.isLogin = false;
				removeCache('token').catch(() => {
					
				});
				removeCache('user_info').catch(() => {
					
				});
				this.getLoginCode();
			},
			fightClick() {
				uni.navigateTo({
					url: '/pagesLi/fight/index'
				});
			},
			studentClick() {
				uni.navigateTo({
					url: '/pagesStudent/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding: 10px;
	}
	.login{
		margin: 10px auto 10px;
	}
	.user-container {
		background-color: white;
		border-radius: 5px;
		padding: 10px;
		display: flex;
		align-items: center;
	}
	.avatar {
		border-radius: 50%;
		height: 50px;
		width: 50px;
	}
	.nickname {
		margin-left: 20px;
	}
	.section-container {
		background-color: white;
		margin-top: 20rpx;
		border-radius: 4rpx;
	}
	
	.item {
		padding: 35rpx 20rpx;
		display: flex;
		align-items: center;
		
		&:hover {
			background-color: $km-border-color;
		}
		&:nth-child(n+2) {
			border-top: 1rpx solid $km-border-color;
		}
		
		&__title {
			flex: 1;
		}

		&__more {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
